var indexVue = new Vue({
	el: '#app',
	data: {
		ivalue: "",
		zTreeObj: null,
		historyButtonName: [],
		setting: {
			view: {
				dblClickExpand: false,
				showLine: false,
				selectedMulti: false
			},
			data: {
				key: {
					name: "title"
				},
				simpleData: {
					enable: false,
					idKey: "id",
					pIdKey: "parentId",
					rootPId: null
				}
			},
			edit: {
				enable: true,
				showRemoveBtn: true,
				removeTitle: "删除书签",
				showRenameBtn: true,
				renameTitle: "编辑书签",
				drag: {
					isCopy: true,
					isMove: true,
					prev: true,
					next: true,
					inner: false
				}
			},
			callback: {
				onClick: function zTreeOnClick(event, treeId, treeNode) {
					console.log(treeNode.tId, treeNode);
					if(treeNode.isParent) {
						var zTree = $.fn.zTree.getZTreeObj(treeId);
						zTree.expandNode(treeNode);
					} else {
						chrome.tabs.create({
							url: treeNode.url,
							//							selected: selected
						});
					}
				},
				onRemove: function zTreeOnClick(event, treeId, treeNode) {
					//					console.log("删除", treeNode.id, treeNode);
					chrome.bookmarks.removeTree(treeNode.id, function() {
						console.log('Bookmark group id has been removed.');
					});
				},
				onRename: function zTreeOnClick(event, treeId, treeNode) {
					//					console.log("重命名", treeNode.id, treeNode);
					chrome.bookmarks.update(treeNode.id, {
						title: treeNode.title,
					}, function(bookmark) {
						console.log(bookmark);
					});
				},
				onDrop: function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
					//					console.log(treeNodes[0].getIndex(), treeNodes[0].id, treeNodes[0].getParentNode().id)
					//					console.log("拖动后", treeId, treeNodes, targetNode, moveType);
					chrome.bookmarks.move(treeNodes[0].id, {
						parentId: treeNodes[0].getParentNode().id,
						index: treeNodes[0].getIndex()
					}, function(bookmark) {
						console.log(bookmark);
					});
				}
			}
		}
	},
	mounted() {
		let vm = this
		vm.initBookmarks()
		chrome.history.search({
			text: '',
			maxResults: 5
		}, function(historyItemArray) {
			console.log(historyItemArray);
			for(let i = 0; i < 5; i++) {
				let historyItem = historyItemArray[i]
				vm.historyButtonName[i] = historyItem
				vm.historyButtonName[i].icon = 'chrome://favicon/size/16@x/' + historyItem.url
			}
		});
		chrome.bookmarks.onCreated.addListener(function(bookmark) {
			console.log(bookmark);
			vm.initBookmarks()
		});
		chrome.bookmarks.onRemoved.addListener(function(id, removeInfo) {
			console.log('Bookmark ' + id + ' has been removed:', removeInfo);
			vm.initBookmarks()
		});
		chrome.bookmarks.onChanged.addListener(function(id, changeInfo) {
			console.log('Bookmark ' + id + ' has been changed:', changeInfo);
			vm.initBookmarks()
		});
		chrome.bookmarks.onMoved.addListener(function(id, moveInfo) {
			console.log('Bookmark ' + id + ' has been moved:', moveInfo);
			vm.initBookmarks()
		});
		chrome.bookmarks.onChildrenReordered.addListener(function(id, reorderInfo) {
			console.log('Bookmark ' + id + ' has a new children order:', reorderInfo);
			vm.initBookmarks()
		});
		chrome.bookmarks.onImportEnded.addListener(function() {
			console.log('Bookmark import ended.');
			vm.initBookmarks()
		});
	},
	watch: {
		ivalue: function(val) {
			let vm = this
			if(val == '') {
				this.initBookmarks()
			} else {
				chrome.bookmarks.search(val, function(bookmarkArray) {
					console.log(bookmarkArray);
					let bookmarkArrays = []
					for(let key in bookmarkArray) {
						let bookmark = bookmarkArray[key]
						if(bookmark.url !== undefined) {
							bookmarkArrays.push(bookmark)
						}
					}
					vm.addBookmarkTreeIcon(bookmarkArrays)
					vm.zTreeObj.destroy();
					vm.zTreeObj = $.fn.zTree.init($("#treeDemo"), vm.setting, bookmarkArrays);
				});
			}
		},
	},
	methods: {
		initBookmarks: function() {
			let vm = this
			chrome.bookmarks.getTree(function(bookmarkArray) {
				console.log(bookmarkArray);
				//			let bookmarkTree = []
				vm.addBookmarkTreeIcon(bookmarkArray)
				if(vm.zTreeObj != null) {
					vm.zTreeObj.destroy()
				}
				bookmarkArray[0].children[0].open = true
				vm.zTreeObj = $.fn.zTree.init($("#treeDemo"), vm.setting, bookmarkArray[0].children);
			});
		},
		show: function() {
			console.log("aaa")
		},
		zTreeOnClick: function(event, treeId, treeNode) {
			alert(treeNode.tId + ", " + treeNode.name);
			//			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			//			this.zTreeObj.expandNode(treeNode);
		},
		addBookmarkTreeIcon: function(bookmarkArray) {
			for(let key in bookmarkArray) {
				let bookmark = bookmarkArray[key]
				if(bookmark.children instanceof Array) {
					this.addBookmarkTreeIcon(bookmark.children)
				} else {
					bookmark.icon = 'chrome://favicon/size/16@x/' + bookmark.url
				}
			}
		},
		openUrl: function(url) {
			let vm = this
			chrome.tabs.create({
				url: url,
			});
		}
	}
})

//function addBookmarkTree(bookmarkArray, bookmarkTree) {
//	for(let key in bookmarkArray) {
//		let bookmark = bookmarkArray[key]
//		//		console.log(bookmark)
//		bookmarkTree.push({
//			id: bookmark.id,
//			pId: bookmark.parentId,
//			name: bookmark.title
//		})
//		if(bookmark.children instanceof Array) {
//			addBookmarkTree(bookmark.children, bookmarkTree)
//		}
//	}
//}